<template>
  <div class="trainDetail">
    <headNavCustom @headCustomBack="headCustomBack">
      <div class="slotCustomM">订单详情</div>
      <div class="slotCustomR" @click="headCustomR">再次预订</div>
    </headNavCustom>
    <div class="main">
      <div class="item event fix" @click="alert = true">
        <div class="eventT">{{trainOrder.orderShowStatusValue || open}}</div>
        <div class="eventR">
          <span class="money">¥{{trainOrder.totalAmount?trainOrder.totalAmount.toFixed(2):null}}</span> <i
          class="iconfont icon-enter fr"></i>
        </div>
      </div>

      <div class="item reminder" v-if="reminderShow">
        <span>温馨提示</span><span class="maohao">:</span><span>请在{{countdown}}内完成支付</span>
      </div>

      <div class="item orderId fix">
        <div class="fl">
          <span>订单号</span><span class="maohao">:</span><span>{{trainOrder.id}}</span>
        </div>
        <div class="yudingTime">
          <span>预订时间</span><span class="maohao">:</span><span>{{yearOrder}}年{{monthOrder}}月{{dayOrder}}日</span>
        </div>
      </div>

      <!--车次信息-->
      <div class="listDetail fix">
        <div>车次信息</div>
        <div class="timeInfo"><span>{{year}}年{{month}}月{{day}}日</span><span>{{week}}</span></div>
        <div class="TDStart">
          <p class="fromS">{{trainOrder.fromStation}}</p>
          <p class="fromT">{{toHours}}:{{toMin}}</p>
          <!--<p class="seatT">座位类别</p>-->
          <p class="seatT">{{go_week_text}}</p>

        </div>
        <div class="pause">
          <p class="trainN">{{trainOrder.trainCode}}</p>
          <p class="trainDur">{{trainOrder.costTimeString}}</p>
        </div>
        <div class="TDArrive">
          <p class="fromS">{{trainOrder.arriveStation}}</p>
          <p class="fromT">{{endHours}}:{{endMin}}</p>
          <!--<p class="seatType">{{trainOrder.seatTypeValue}}</p>-->
          <p class="seatType">{{to_week_text}}</p>
        </div>
      </div>

      <!--取票号-->
      <div class="item travelPlan" v-show="trainOrder.ticketNo">
        <span class="travelPlanT">取票号</span><span>{{trainOrder.ticketNo}}</span>
      </div>

      <!--出行类别-->
      <div class="item travelPlan" v-show="travelPlanShow">
        <span class="travelPlanT">出行类别</span><span>{{travel.itemTxt}}</span>
      </div>

      <!--费用归属-->
      <div class="item travelPlan" v-show="costCenterShow">
        <span class="travelPlanT">费用归属</span>
        <input type="text" readonly v-model="handleCostCenterName"/>
      </div>

      <!--出差事由-->
      <div class="item travelPlan" v-show="trainOrder.travelReason">
        <span class="travelPlanT">出差事由</span><input type="text" class="ell" readonly v-model="trainOrder.travelReason"/>
      </div>

      <!--乘车人-->
      <!--<div class="passenger fix">-->
      <!--<div class="passengerT border-b">-->
      <!--乘车人-->
      <!--</div>-->
      <!--<div class="passengerInfo" v-for="item in passengers">-->
      <!--<div><span class="passengerInfoT">{{item.name}}</span>&lt;!&ndash;<span class="taocan">{{item.genderValue}}</span>&ndash;&gt;&lt;!&ndash;<span class="taocan">{{item.passengerTypeValue}}票套餐</span>&ndash;&gt;</div>-->
      <!--<div class="idCard"><span class="passengerInfoT">{{item.credentialTypeValue}}</span><span>{{item.credentialNo}}</span></div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="passenger">
        <div class="passenger-head">乘车人</div>
        <div class="passenger-list">
          <ul v-if="passengerlist.length>0">
            <li v-for="(item,index) in passengerlist">
              <div class="itme-name">
                <p>{{item.name}}</p>
                <div>
                  <span>{{item.seatTypeValue}}</span>
                  <span>¥{{item.actualAmount}}</span>
                </div>
              </div>
              <div class="item-code">
                <div>
                  <span>{{item.credentialTypeValue}}</span>
                  <span>{{item.credentialNo}}</span>
                </div>
                <p>{{item.seatDetail}}</p>
              </div>
              <div class="iten-state">{{item.statetext}}</div>
            </li>
          </ul>
        </div>
      </div>

      <!--联系人-->
      <div class="passenger fix">
        <div class="passengerT">
          联系人
        </div>
        <div class="passengerInfo">
          <div><span class="passengerInfoT">{{contactor.name}}</span><span>{{contactor.mobile}}</span></div>
        </div>
      </div>
      <!--审批历史-->
      <router-link v-if="hasHistoryAuth" tag="div"
                   :to="{name:'approveHistory',query:{bizType:'OTA_ORDER',bizId:trainOrder.id}}" class="approveHistory">
        <div>审批历史<i class="iconfont icon-more"></i></div>
      </router-link>
      <!--退改签-->
      <div class="changeBack">
        <div class="back" v-show="changeBackShow">
          <i class="iconfont icon-tuigaiguize"></i>
          <!--<router-link :to="{path:'/trainUnsb'}" tag="a" exact>申请退票</router-link>-->
          <span @click="applyReturnTicket">申请退票</span>
        </div>
        <div class="change" v-show="changeBackShow">
          <i class="iconfont icon-PAY_CASH_NO"></i>
          <span @click="applyChangeTicket">申请改签</span>
        </div>
        <div class="changeRule" @click="changeRuleShow=true">
          <i class="iconfont icon-guize"></i>
          退改规则
        </div>
        <div class="recall-order" v-if="canCancel" @click="recallOrder">撤回审批</div>
      </div>
      <!--出差申请-->
      <!--  <div class="passenger fix">
          <div class="passengerT">
            出差申请
          </div>
          <div class="passengerInfo" v-show="travelApplyShow">
            <div><span class="passengerInfoT">出发日期</span><span>2016年10月10日</span></div>
          </div>
          <div class="passengerInfo" v-show="travelApplyShow">
            <div><span class="passengerInfoT">出行原因</span><span>客户关系</span></div>
          </div>
          <div class="passengerInfo" v-show="travelApplyShow">
            <div><span class="passengerInfoT">情况说明</span><input type="text" v-model="travelApplyExplain" readonly/></div>
          </div>
          <div class="passengerInfo" v-show="travelApplyShow">
            <div><span class="passengerInfoT">出发日期</span><span>2016年10月10日</span></div>
          </div>
        </div>-->
    </div>

    <!--footer-->
    <footer class="fix" v-show="foot">
      <div class="fix" v-show="twoBtnShow">
        <div class="cancel" @click="cancelOrder">取消订单</div>
        <div class="success" @click="redBtnClick">立即支付</div>
      </div>
      <div class="redBtn" v-show="redBtnShow" @click="redBtnClick">{{redBtnShowText}}</div>
      <div class="blueBtn" v-show="blueBtnShow">申请退改签</div>
    </footer>
    <!--成人购票说明弹窗-->
    <alert v-show="alert">

      <div class="alert1">
        <div class="title-a">成人购票说明</div>
        <div class="order-a fix">
          <div class="order-sum">订单总额</div>
          <div class="order-money">¥{{trainOrder.totalAmount}}</div>
        </div>
        <ul>
          <li class="fix">
            <div class="fl">成人票</div>
            <div class="fr">¥{{trainOrder.ticketPrice}}x{{passengersNum}}</div>
          </li>
        </ul>
        <div class="foot" @click="alert = false">关闭</div>
      </div>

    </alert>
    <!--退改签规则弹窗-->
    <popup v-model="changeRuleShow" position="bottom" class="changePop">
      <div class="changeTitle">
        退改签规则
      </div>
      <div class="changeItem">
        <p>1、购票成功后，未取票且发车前时间大于35分钟，可通过商旅助手系统在线申请退票；</p>
        <p>2、开车前15天(不含)以上，不收取退票费；</p>
        <p>3、开车前48小时以上的，退票手续费5%；</p>
        <p>4、开车前25-48小时之间，退票手续费10%；</p>
        <p>5、开车前24小时之内，退票手续费20%；</p>
        <p>6、最终退款以铁路局实退为准，退票手续费最低收取2元；</p>
        <p>7、购票成功后，已取票或发车前时间小于35分钟，需您自行携带购票时所使用的乘车人有效证件原件和火车票在发车前去火车站退票窗口办理退票；</p>
      </div>
    </popup>
  </div>
</template>
<script>
  import headNavCustom from '@/components/headNavCustom.vue'
  import {Indicator, Toast,Popup} from 'mint-ui';
  import alert from "@/components/alert.vue";
  import {week_tu} from "@/lib/weeks.js";
  import {date_fresh} from "@/lib/plan.js";
  import train from '@/data/train.js';
  export default{
    components:{Popup,headNavCustom, Indicator, alert},
    data(){
      return {
        orderId: null,
        foot: true,
        twoBtnShow: false,
        redBtnShow: false,
        redBtnShowText: '',
        blueBtnShow: false,
        reminderShow: false,//温馨提示
        countdown: '',//倒计时提示
        travelPlanShow: true,//出行类别
        costCenterShow: true,//费用归属
        changeBackShow: false,//退改签
        changeShow: false,//改签弹窗
        changeRuleShow: false,//退改签规则弹窗
//        travelApplyShow:true,//出差申请
        alert: false,
        travelApplyExplain: '应总公司要求到北京出差',
        open: '',
        fromDate: '',
        year: '',
        month: '',
        day: '',
        toHours: '',
        toMin: '',
        toSec: '',
        endHours: '',
        endMin: '',
        endSec: '',
        yearOrder: '',
        monthOrder: '',
        dayOrder: '',
        flightOrderDto: {},
        passengers: "",//乘车人列表
        passengersNum: '',
        go_date: "",
        to_date: "",
        travel: {
          itemTxt: '',
        }, //差旅计划
        trainOrder: {}, /*请求到的订单详情数据*/
        contactor: {
          mobile: '',
          name: '',
        },
        discountAmountShow: false,
        routerFrom: '',
        orgPath: '',
        hasHistoryAuth: false,
        week:null
      }
    },
    methods: {
      // 申请改签
      applyChangeTicket() {
        this.$vux.toast.show({
          type: 'text',
          text: '暂未开放',
          time: 2000
        })
      },
      // 申请退票
      applyReturnTicket() {
        let that = this;
        let fromTime = +moment(that.$store.state.trainRefund.fromTime);
        let nowTime = +moment();
        if (nowTime - fromTime >= 35 * 60 * 1000) {
          that.$vux.alert.show({
            content: '距离发车时间小于35分钟，无法在线退改，请您到车站退改窗口办理.'
          })
        } else {
          that.$router.push({
            name: 'trainUnsb',
            query:{
              orderId:that.orderId
            }
          })
        }
      },
      recallOrder() {
        var that = this;
        that.$vux.confirm.show({
          content: '确定撤销吗？',
          onCancel() {
          },
          onConfirm() {
            train.recallOrder(that.orderId, function (data) {
              //撤销成功状态
              if (data.code == "1") {
                that.$vux.toast.show({
                  type: '',
                  text: data.msg,
                  time: 1000
                })
                setTimeout(function () {
                  that.$router.push({
                    name: 'all',
                    query: {
                      type: 'T'
                    }
                  })
                }, 1000)
              } else if (data.code != 1) {
                that.$vux.toast.show({
                  type: 'cancel',
                  text: data.msg,
                  time: 1000
                })
              }
            }, function (err) {
              that.$vux.toast.show({
                type: 'cancel',
                text: '火车撤销审批失败',
                time: 1000
              })
            });
          }
        });
      },
      headCustomBack(){
        this.$router.go(-1);
        /*this.$router.replace({
         name:'orderIndex'
         })*/
      },
      headCustomR(){
        $jump.toTrainIndex(this);
      },
      redBtnClick(){
        $jump.toPay(this.orderId);
      },
      all_ordel(){
        //解决待付款数据不刷新
        var that = this;
        //执行加载动画
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var serverUrl = $tool.getServerUrl();
        $.ajax({
          type: 'get',
          url: serverUrl + '/allOrderStatusList/allOrderNum.json',
          data: {},
          dataType: 'jsonp',
          jsonp: 'callback',
          //jsonpCallback:'callback',
        }).done(function (res) {
          that.$store.commit("setOrderNum", res);
          Indicator.close();
        }).fail(function (res) {
          Indicator.close();
        });
      },
      cancelOrder(){
        Indicator.open({
          text: "加载中...",
          spinner: 'fading-circle'
        })
        var that = this;
        train.cancelOrder(that.orderId, function (res) {
          that.open = '已取消';
          that.twoBtnShow = false;
          that.init();
        },function () {
          Indicator.close();
        });
      },
      init(){
        //please get from url TODO
        this.orderId = this.$route.query.orderId;
        var that = this;
        Indicator.open({text: '加载中...', spinnerType: 'fading-circle'});
        var serverUrl = $tool.getServerUrl();
        $.ajax({
          type: 'get',
          url: serverUrl + '/order/OrderStatus/orderId.json',
          data: {
            orderId: that.orderId
          },
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'callback'
        }).done(function (res) {
            console.log(res)
            that.hasHistoryAuth = res.hasHistoryAuth;
            that.go_date = res.fromTime;
            that.to_date = res.arriveTime;
            //火车票退订
            that.$store.state.trainRefund.fromTime = res.fromTime;
            that.$store.state.trainRefund.passengerList = res.trainOrder.passengerList;
            that.$store.state.trainRefund.refundContact = res.trainOrder.contactor;
            that.$store.state.trainRefund.userDetail = res.trainOrder;
            var open = res.trainOrder.orderShowStatus;
            if (res.isReservationPerson) {//是否是预订人????
              switch (open) {
                case 'WAIT_PAYMENT':
                  that.open = '待付款';
                  that.foot = true;
                  that.twoBtnShow = true;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = true; //温馨提示
                  that.travelPlanShow = true; //出行类别
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'WAIT_AUTHORIZE':
                  that.open = '待审批';
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.foot = false;
                  that.redBtnShowText = '立即支付';
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //出行类别
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'AUTHORIZE_RETURN':
                  that.open = '审批驳回';
                  that.twoBtnShow = true;
                  that.redBtnShow = false;
                  that.foot = true;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'IN_ISSUE':
                  that.open = '出票中';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'ISSUED':
                  that.open = '已出票';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.redBtnShowText = '申请退改签';
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = true; //退改签
                  break;
                case 'CANCELED':
                  that.open = '已取消';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                default:
                  break;
              }
            } else {
              switch (open) {
                case 'WAIT_PAYMENT':
                  that.open = '待付款';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = true; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'WAIT_AUTHORIZE':
                  that.open = '待审批';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.redBtnShowText = '立即支付';
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'AUTHORIZE_RETURN':
                  that.open = '审批驳回';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'IN_ISSUE':
                  that.open = '出票中';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'ISSUED':
                  that.open = '已出票';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.redBtnShowText = '申请退改签';
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                case 'CANCELED':
                  that.open = '已取消';
                  that.foot = false;
                  that.twoBtnShow = false;
                  that.redBtnShow = false;
                  that.blueBtnShow = false;
                  that.reminderShow = false; //温馨提示
                  that.travelPlanShow = true; //差旅计划
                  that.costCenterShow = true; //费用归属
                  that.changeBackShow = false; //退改签
                  break;
                default:
                  break;
              }
            }

            if (open == 'REFUNDED') { //以退票
              that.reminderShow = false;
            }
            that.orgPath = res.orgPath;  //费用归属
//      经停时间
            if (res.travel) {
              if (res.travel.itemTxt) {
                that.travel = res.travel;
              } else {
                that.travel = res.travel;
                that.travel.itemTxt = ''
              }

            } else {
              that.travel = this.travel
            }

            that.trainOrder = res.trainOrder;
            that.passengers = res.trainOrder.passengerList;  //乘机人数组

            that.passengersNum = that.passengers.length;

            that.contactor = res.trainOrder.contactor; //联系人

            var fromDate = new Date(parseInt(res.trainOrder.fromTime));
            var toDate = new Date(parseInt(res.trainOrder.arriveTime));
            var createDate = new Date(parseInt(res.trainOrder.createDate));
            that.year = fromDate.getFullYear();

            that.month = fromDate.getMonth() + 1;

            that.day = fromDate.getDate();

            that.yearOrder = createDate.getFullYear();

            that.monthOrder = createDate.getMonth() + 1;

            that.dayOrder = createDate.getDate();

            switch (fromDate.getDay()) {
              case 0:
                that.week = '周日';
                break;
              case 1:
                that.week = '周一';
                break;
              case 2:
                that.week = '周二';
                break;
              case 3:
                that.week = '周三';
                break;
              case 4:
                that.week = '周四';
                break;
              case 5:
                that.week = '周五';
                break;
              case 6:
                that.week = '周六';
                break;
            }
            //出发时间  到达时间
            that.toHours = fromDate.getHours();
            that.toMin = fromDate.getMinutes();
            that.toSec = fromDate.getSeconds();
            that.endHours = toDate.getHours();
            that.endMin = toDate.getMinutes();
            that.endSec = toDate.getSeconds();

            if (that.toHours < 10) {
              that.toHours = '0' + that.toHours
            }
            if (that.toMin < 10) {
              that.toMin = '0' + that.toMin
            }
            if (that.toSec < 10) {
              that.toSec = '0' + that.toSec
            }
            if (that.endHours < 10) {
              that.endHours = '0' + that.endHours
            }
            if (that.endMin < 10) {
              that.endMin = '0' + that.endMin
            }
            if (that.endSec < 10) {
              that.endSec = '0' + that.endSec
            }
            //时间倒计时
            let date = res.trainOrder.lastUpdateDate;
            date_fresh(date, function (itme) {
              if (itme == 0) {
                that.reminderShow = false;
              }
              that.countdown = itme;
            },25)
            //结束加载动画 
            Indicator.close();
          })
          .fail(function (res) {
            Indicator.close();
          })
      },
    },
    mounted(){
      this.init();
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.routerFrom = from.name;
      })
    },
    computed: {
      // 只显示费用归属最后一级
      handleCostCenterName () {
        let costCenter = this.orgPath;
        if (!costCenter) return '';
        let index = costCenter.lastIndexOf('/');
        if (index !== -1) {
          return costCenter.slice(index + 1, costCenter.length)
        }
        return costCenter
      },
      canCancel(){
        var userInfo = this.$store.state.userInfo;
        var order = this.$store.state.trainRefund.userDetail;
        return userInfo.userId == order.userId && order.orderShowStatus == 'WAIT_AUTHORIZE';
      },
      orderIndex(){
        return this.$store.state.orderIndex;
      },
      go_week_text(){
        let godate = this.go_date.substring(0, 10);
        let week = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        let getduy = godate.replace(/-/g, ",");
        let date = new Date(getduy);
        return week[date.getDay()];
      },
      to_week_text(){
        let godate = this.go_date.substring(0, 10);
        let todate = this.to_date.substring(0, 10);
        if (godate == todate) {
          return this.go_week_text;
        } else {
          let week = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
          let getduy = todate.replace(/-/g, ",");
          let date = new Date(getduy);
          return week[date.getDay()];
        }
      },
      passengerlist(){
        let open = this.open;
        let satecode = this.trainOrder.seatTypeValue;
        let passengers = this.passengers;
        if (satecode != "无座") {
          for (let i = 0; i < passengers.length; i++) {
            if (passengers[i].isNoSeat) {
              passengers[i].seatTypeValue = "无座";
            } else {
              passengers[i].seatTypeValue = satecode;
            }
            passengers[i].orderstar = this.open;
          }
        } else {
          for (let i = 0; i < passengers.length; i++) {
            passengers[i].seatTypeValue = "无座";
            passengers[i].orderstar = this.open;
          }
        }

        for (let i = 0; i < passengers.length; i++) {
          if (passengers[i].refundOrderId == "") {
            passengers[i].statetext = open;
          } else if (passengers[i].refundType === "REFUNDING") {
            passengers[i].statetext = '退票中';
          } else if (passengers[i].refundType === "REFUNDED") {
            passengers[i].statetext = '已退票';
          }
        }
        return passengers;
      },
    }
  }


</script>
<!--头的修改-->
<style scoped>
  .slotCustomM {
    height: 2.2rem;
    flex: 0 0 65%;
    text-align: center;
    line-height: 2.2rem;
    font-size: .9rem;
    color: #fff;
  }

  .slotCustomR {
    flex: 0 0 20%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: right;
    font-size: .8rem;
  }
</style>
<style>
  .orderError .mint-toast-text {
    font-size: .9rem;
  }
</style>
<style scoped>
  .main {
    padding: 2.2rem 0 3.75rem 0;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
  }

  .trainDetail {
    background-color: #f0f0f0;
    font-size: .75rem;
    overflow: auto;
    height: 100%;
  }

  .item {
    width: 97.33%;
    height: 2.5rem;
    background-color: #fff;
    margin: .25rem auto;
    padding: 0 .5rem;
    box-sizing: border-box;
    line-height: 2.5rem;
    border-radius: .125rem;
  }

  .yudingTime {
    float: right;
    font-size: .6rem;
  }

  .maohao {
    margin: 0 .15rem;
  }

</style>

<!--待支付-->
<style scoped>
  .event {

  }

  .event > div {
    float: left;
  }

  .event .eventR {
    float: right;
    font-size: .8rem;
  }

  .money {
    color: #ce1b1b;
  }

  .eventT {
    font-size: .8rem;
    color: #ce1b1b;
    margin-right: .75rem;
  }

  .eventInfo {
    color: #ccc;
    font-size: .7rem;
  }

  .icon-enter {
    font-size: .8rem;
  }

</style>

<!--温馨提示-->
<style>
  .recall-order {
    margin: 2rem auto;
    width: 92%;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    background-color: #aaa;
    border-radius: .1rem;
  }

  .reminder {
    color: #ce1b1b;
  }

  .icon-close1 {
    float: right;
    font-size: .75rem;
    font-weight: bold;
  }
</style>

<!--航班信息-->
<style rel="stylesheet/scss" lang="scss" scoped>
  .listDetail {
    margin: .5rem .3rem;
    padding: .75rem .45rem;
    background-color: white;
    .TDStart {
      position: relative;
      float: left;
      width: 4.5rem;
      text-align: left;
      color: #333333;
      .fromS {
        margin-bottom: .5rem;
      }
      .fromT {
        margin-bottom: .5rem;
        font-weight: bold;
      }
    }
    .TDArrive {
      position: relative;
      float: left;
      width: 4.5rem;
      text-align: right;
      color: #333333;
      .fromS {
        margin-bottom: .5rem;
      }
      .fromT {
        margin-bottom: .5rem;
        font-weight: bold;
      }
    }
    .pause {
      position: relative;
      float: left;
      width: 8.25rem;
      text-align: center;
      top: .5rem;
      background: url("../assets/images/trainDetailBg1.png") no-repeat center center;
      .trainN {
        font-size: .55rem;
        margin-bottom: 1.1rem;
      }

      .trainDur {
        font-size: .55rem;
      }
    }
    .listDate {
      width: 100%;
      color: #0094db;
      font-size: .6rem;
      .pre {
        position: relative;
        float: left;
        width: 4.5rem;
        height: 2rem;
        line-height: 2rem;
        .icon-llmainpageback {
          font-size: .6rem;
        }
      }
      .date {
        width: 8.25rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        position: relative;
        float: left;
      }
      .next {
        position: relative;
        float: left;
        width: 4.5rem;
        text-align: right;
        height: 2rem;
        line-height: 2rem;
        .icon-enter {
          font-size: .6rem;
        }
      }
    }
    .listItem {
      width: 100%;
      color: #333333;
      font-size: .75rem;
      position: relative;
      .seat {
        width: 4rem;
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
      }
      .seatN {
        width: 6rem;
        text-align: center;
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
      }
      .seatP {
        height: 2.5rem;
        line-height: 2.5rem;
        position: relative;
        float: left;
        width: 4.75rem;
        padding-left: 1.25rem;
        text-align: left;
        color: red;
      }
      .yuding {
        width: 2.5rem;
        height: 1.25rem;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 1.25rem;
        border-radius: .2rem;
        position: absolute;
        margin-top: 1.25rem;
        transform: translateY(-50%);
        right: 0;
      }

    }
    .backRule {
      font-size: .75rem;
      color: #0094db;
    }
  }

  .hangabn {
    width: 97.33%;
    background-color: #fff;
    margin: .25rem auto;
    padding: .75rem .5rem;
    box-sizing: border-box;
    border-radius: .125rem;
  }

  .jiantou {
    width: 6.25rem;
    height: .25rem;
    background: url("../assets/images/goBackLine.png") no-repeat center;
    background-size: 5.65rem .25rem;
    margin-bottom: .1rem;
  }

  .timeInfo {
    text-align: center;
    margin-bottom: .25rem;
  }

  .startTime {
    float: left;
    width: 5.5rem;
    text-align: center;
    line-height: 1.85rem;
    font-size: 1rem;
  }

  .jiantouB {
    float: left;
  }

  .endTime {
    float: left;
    width: 5.5rem;
    text-align: center;
    line-height: 1.85rem;
    font-size: 1rem;
  }

  .startPlace {
    float: left;
    text-align: center;
    width: 5.5rem;
    font-size: .6rem;
  }

  .startCompany {
    float: left;
    text-align: center;
    width: 5.5rem;
  }

  .endPlace {
    float: right;
    text-align: center;
    width: 5.5rem;
    font-size: .6rem;
  }

  .currentPercent {
    float: right;
    text-align: center;
    width: 5.5rem;
    height: .9rem;
  }

  .startCity {
    float: left;
    text-align: center;
    width: 5.5rem;
  }

  .endCity {
    float: right;
    text-align: center;
    width: 5.5rem;
  }

  .jiaotouPre, .jiaotouNext {
    width: 6.25rem;
    text-align: center;
    font-size: .6rem;
    line-height: .75rem;
  }

  .flightSize {
    float: left;
    width: 3.75rem;
    text-align: center;
  }

  .flightCabin {
    float: left;
    width: 2.5rem;
    text-align: center;
  }

  .flightDetail {
    font-size: .65rem;
    margin-top: .25rem;
    line-height: .9rem;
  }

  .icon-tangshi {
    font-size: 1.15rem;
    color: #ce1b1b;
    vertical-align: middle;
  }

  .changeBack {
    width: 100%;
    position: relative;
    float: left;
    .iconfont {
      vertical-align: middle;
    }
    .change {
      box-sizing: border-box;
      position: relative;
      width: 33%;
      float: left;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      font-size: .7rem;
      color: #0094db;
      padding: 0 .25rem;
    }
    .back {
      box-sizing: border-box;
      position: relative;
      float: left;
      width: 33%;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      color: #0094db;
      font-size: .7rem;
      padding: 0 .25rem;
    }
    .changeRule {
      box-sizing: border-box;
      position: relative;
      float: left;
      width: 33%;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      color: #0094db;
      font-size: .7rem;
    }
  }

  .changePop {
    width: 92%;
    margin: 0 auto 5rem;
    height: 20rem;
    overflow: scroll;
    .changeTitle {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333333;
      font-size: .8rem;
      border-bottom: 1px solid #bbbbbb;
    }
    .changeItem {
      p {
        padding: .5rem .75rem 0 .75rem;
        color: #333333;
        font-size: .7rem;
        line-height: 1.5;
      }
    }

  }
</style>


<!--差旅计划/费用归属-->
<style scoped>
  .travelPlan {

  }

  .travelPlanT {
    margin-right: 1.75rem;
  }

  .travelPlan input {
    font-size: .75rem;
    width: 12rem;
    height: 2.5rem;
  }
</style>

<!--乘机人/联系人/出差申请-->
<style scoped>
  .passenger {
    width: 97.33%;
    background-color: #fff;
    margin: .25rem auto;
    padding: .75rem .5rem 0px;
    box-sizing: border-box;
    border-radius: .125rem;
  }

  .passengerT {
    float: left;
    margin: 0 0 .75rem 0;
  }

  .passengerInfo {
    float: right;
    width: 12.5rem;
    margin-bottom: .75rem;
  }

  .passengerInfo input {
    font-size: .75rem;
  }

  .passengerInfoT {
    margin-right: 1rem;
    width: 3.25rem;
    display: inline-block;
  }

  .taocan {
    color: #ccc;
  }

  .idCard {
    margin-top: .5rem;
  }
</style>

<!--footer-->
<style scoped>
  footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    text-align: center;
  }

  .cancel {
    float: left;
    background-color: #0094db;
    width: 50%;
  }

  .success {
    float: right;
    background-color: #ce1b1b;
    width: 50%;
  }

  .redBtn {
    background-color: #ce1b1b;
    color: #fff;
  }

  .blueBtn {
    background-color: #0094db;
    color: #fff;
  }
</style>

<!--弹窗-->
<style scoped>
  .alert1 {
    text-align: center;
    font-size: .75rem;
    width: 12rem;
    height: 12.5rem;
    padding: .5rem .5rem;
  }

  .title-a {
    padding-bottom: .5rem;
    border-bottom: 1px solid #ccc;
  }

  .order-a {
    padding: .5rem;
    border-bottom: 1px solid #ccc;
  }

  .order-sum {
    float: left;
  }

  .order-money {
    float: right;
    color: #ce1b1b;
  }

  .alert1 ul {
    line-height: 1.5rem;
    padding: .25rem .5rem;
  }

  .alert1 .foot {
    width: 90%;
    position: fixed;
    bottom: .5rem;
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
    background-color: #0a628f;
    color: #fff;
  }

  .passenger-list li {
    border-bottom: 1px solid #e5e5e5;
  }

  .passenger-list li:last-child {
    border-bottom: 0;
  }

  .passenger-head {
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .itme-name {
    display: flex;
    line-height: 2rem;
  }

  .itme-name > p {
    width: 50%;
    flex: 0 50%;
  }

  .itme-name > div {
    width: 50%;
    flex: 0 50%;
    text-align: right;
  }

  .itme-name > div > span {
    padding-left: 3px;
  }

  .item-code {
    display: flex;
    font-size: .65rem;
    color: #999999;
  }

  .item-code > div {
    flex: 1;
  }

  .item-code > p {
    width: 4.625rem;
    text-align: right;
  }

  .iten-state {
    line-height: 2rem;
    color: #ce1b1b;
    font-size: .7rem;
  }

  /*审批历史*/
  .approveHistory {
    border-radius: .125rem;
    line-height: 2rem;
    background-color: #FFFFFF;
    margin: 0 .25rem .3rem;
  }

  .approveHistory > div {
    padding: 0 .5rem;
  }

  .approveHistory .icon-more {
    font-size: 1rem;
    line-height: 2rem;
    float: right;
    color: #333;
  }
</style>
